<template>
  <div class="app-container home">
    <div class="top">
      <div>
        <i class="el-icon-menu icon"></i>
        <ul>
          <li>太空舱数</li>
          <count-to :startVal="0" :endVal="userDataTop.spaceNum" :duration="2000" class="number" separator=""
            :decimals="2" />
        </ul>
      </div>
      <div v-if="$store.state.user.capsuleInfoId != ''">
        <i class="el-icon-s-custom icon"></i>
        <ul>
          <li>累计用户</li>
          <count-to :startVal="0" :endVal="userDataTop.userNum" :duration="1500" class="number" separator=""
            :decimals="2" />
        </ul>
      </div>
      <div>
        <i class="el-icon-s-order icon"></i>
        <ul>
          <li>累计成交</li>
          <count-to :startVal="0" :endVal="userDataTop.Num" :duration="1200" class="number" separator=""
            :decimals="2" />
        </ul>
      </div>
    </div>
    <el-row :gutter="20">
      <el-col>
        <el-row style="margin-top: 20px;">
          <order-chart :chart-data="lineChartData" />
        </el-row>
      </el-col>
      <el-col>
        <el-row style="margin-top: 20px;">
          <space-order :chart-data="spaceOrderData" />
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import countTo from 'vue-count-to'
  import orderChart from '@/components/orderChart/orderChart'
  import spaceOrder from '@/components/bargainChart/bargainChart'
  import {
    echartsTop,
    echartsCenter,
    echartsCenterTwo
  } from '@/api/index/index'
  export default {
    components: {
      countTo,
      orderChart,
      spaceOrder
    },
    name: "Index",
    data() {
      return {
        userDataTop: {
          spaceNum: 0,
          userNum: 0,
          Num: 0
        },
        lineChartData: {},
        spaceOrderData:{}
      }
    },
    created() {
      this.echartsTopData()
      this.echartsCenterData()
      this.echartsCenterTwoData()
    },
    methods: {
      goTarget(href) {
        window.open(href, "_blank")
      },
      // 头部数据
      echartsTopData() {
        echartsTop().then(res => {
          this.userDataTop = {
            spaceNum: res.data.cntA,
            userNum: res.data.cntB,
            Num: res.data.cntC
          }
        })
      },
      // 中间第第一个数据
      echartsCenterData() {
        echartsCenter().then(res => {
          this.lineChartData = res.data
        })
      },
      // 中间第第二个数据
      echartsCenterTwoData() {
        echartsCenterTwo().then(res =>{
          this.spaceOrderData = res.data
        })
      },
    },
  }
</script>
<style>
  ul {
    list-style: none;
  }

  li {
    list-style-type: none;
    text-align: center;
  }

  li::before {
    font-size: 12px;
    color: #F5CC00;
    padding-right: 8px;
  }
</style>
<style scoped lang="scss">
  .top {
    display: flex;
    align-items: center;
    justify-content: space-around;

    div {
      width: 28%;
      padding: 10px 30px;
      box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
      border-color: rgba(0, 0, 0, .05);
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-radius: 4px;

      .icon {
        font-size: 62px;
        color: #fff;
      }

      ul {
        text-align: center;

        li {
          display: block;
          font-size: 16px;
          color: #fff;
          width: 100%;
          margin-bottom: 10px;
        }
      }
    }

    div:nth-child(1) {
      background: #00C0EF;
    }

    div:nth-child(2) {
      background: #00A65A;
    }

    div:nth-child(3) {
      background: #F39C12;
    }

    .number {
      color: #fff;
      font-size: 18px;
    }
  }
</style>
